<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>预算管理系统 - 创新版</title>
  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💰</text></svg>">
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/quick-actions.css">
  <link rel="stylesheet" href="./css/notification.css">
  <style>
    body {
      transition: background 0.3s, color 0.3s;
    }
    
    body.dark-mode {
      background: #1a1a1a;
      color: #e0e0e0;
    }
    
    body.dark-mode .main-container {
      background: #1a1a1a;
    }
    
    body.dark-mode .top-bar,
    body.dark-mode .section-card,
    body.dark-mode .book-card,
    body.dark-mode .modal-content {
      background: #2d2d2d;
      color: #e0e0e0;
    }
    
    body.dark-mode .book-card:hover {
      background: #3d3d3d;
    }
    
    body.dark-mode input,
    body.dark-mode select,
    body.dark-mode textarea {
      background: #3d3d3d;
      color: #e0e0e0;
      border-color: #555;
    }
    
    body.dark-mode .record-item,
    body.dark-mode .empty-state {
      border-color: #444;
      color: #ccc;
    }
  </style>
  <style>
    /* 主页面样式 */
    .main-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 20px;
    }
    
    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding: 15px 20px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .user-info {
      display: flex;
      align-items: center;
      gap: 15px;
    }
    
    .btn {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }
    
    .btn-primary { background: #4285f4; color: white; }
    .btn-success { background: #34a853; color: white; }
    .btn-danger { background: #ea4335; color: white; }
    .btn-secondary { background: #666; color: white; }
    
    .btn:hover { opacity: 0.9; }
    
    /* 账本列表 */
    .books-section {
      margin-bottom: 30px;
    }
    
    .books-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
      margin-bottom: 20px;
    }
    
    .book-card {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      cursor: pointer;
      transition: transform 0.2s;
      border-left: 4px solid;
    }
    
    .book-card:hover { transform: translateY(-2px); }
    .book-card.active { box-shadow: 0 4px 12px rgba(66,133,244,0.3); }
    
    .book-icon { font-size: 32px; margin-bottom: 10px; }
    .book-name { font-weight: bold; margin-bottom: 5px; }
    .book-info { font-size: 12px; color: #666; }
    
    .add-book-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #f5f5f5;
      border: 2px dashed #ccc;
      color: #666;
      font-size: 48px;
    }
    
    /* 模态框 */
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.5);
      z-index: 1000;
      align-items: center;
      justify-content: center;
    }
    
    .modal.active { display: flex; }
    
    .modal-content {
      background: white;
      padding: 30px;
      border-radius: 8px;
      max-width: 500px;
      width: 90%;
      max-height: 80vh;
      overflow-y: auto;
    }
    
    .modal-title {
      font-size: 20px;
      margin-bottom: 20px;
      font-weight: bold;
    }
    
    .form-group {
      margin-bottom: 15px;
    }
    
    .form-group label {
      display: block;
      margin-bottom: 5px;
      color: #666;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }
    
    .modal-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      margin-top: 20px;
    }
    
    /* 主内容区 */
    .main-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    
    @media (max-width: 768px) {
      .main-content { grid-template-columns: 1fr; }
    }
    
    .section-card {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .section-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 2px solid #4285f4;
    }
    
    /* 记录列表 */
    .records-list {
      max-height: 400px;
      overflow-y: auto;
    }
    
    .record-item {
      padding: 12px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .record-info { flex: 1; }
    .record-amount { font-weight: bold; font-size: 16px; }
    .record-amount.income { color: #34a853; }
    .record-amount.expense { color: #ea4335; }
    .record-date { font-size: 12px; color: #666; }
    
    .empty-state {
      text-align: center;
      padding: 40px;
      color: #999;
    }
    
    /* 分享码显示 */
    .share-code-display {
      background: #f5f5f5;
      padding: 20px;
      border-radius: 4px;
      text-align: center;
      margin: 15px 0;
    }
    
    .share-code {
      font-size: 32px;
      font-weight: bold;
      color: #4285f4;
      letter-spacing: 4px;
      margin: 10px 0;
    }
    
    .color-picker {
      display: flex;
      gap: 10px;
      margin-top: 10px;
    }
    
    .color-option {
      width: 40px;
      height: 40px;
      border-radius: 4px;
      cursor: pointer;
      border: 2px solid transparent;
    }
    
    .color-option.selected { border-color: #333; }
    
    .icon-picker {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    
    .icon-option {
      font-size: 32px;
      cursor: pointer;
      opacity: 0.5;
      transition: opacity 0.2s;
    }
    
    .icon-option.selected { opacity: 1; }
    
    /* 紧凑卡片样式（用于部分功能） */
    .compact-card {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      overflow: hidden;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .compact-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .compact-card-header {
      padding: 15px 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .compact-card-icon {
      font-size: 24px;
    }
    
    .compact-card-title {
      font-size: 16px;
      font-weight: bold;
      flex: 1;
    }
    
    .compact-card-body {
      padding: 20px;
      text-align: center;
    }
    
    .compact-card-desc {
      color: #666;
      font-size: 14px;
      margin-bottom: 15px;
      line-height: 1.6;
    }
    
    .compact-card-content {
      min-height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 15px;
    }
    
    .compact-card-button {
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .compact-card-button:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
  </style>
</head>
<body>
  <div class="main-container">
    <!-- 顶部导航栏 -->
    <div class="top-bar">
      <div class="user-info">
        <h2>💰 预算管理系统<span style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 4px 12px; border-radius: 12px; font-size: 12px; margin-left: 10px;">创新版</span></h2>
        <span id="userName">用户</span>
        <!-- 🎮 用户等级显示 -->
        <div id="userLevelBadge" style="margin-left: 15px; padding: 5px 12px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 15px; font-size: 12px; display: none;">
          <span id="levelIcon">🌱</span>
          <span id="levelName">新手</span>
          <span style="margin-left: 5px;">Lv.<span id="levelNumber">1</span></span>
        </div>
      </div>
      <div style="display: flex; align-items: center; gap: 10px;">
        <!-- 🎮 经验值和积分显示 -->
        <div id="gameStats" style="display: none; background: #f5f5f5; padding: 5px 10px; border-radius: 8px; font-size: 12px;">
          <span title="经验值">⚡ <span id="expValue">0</span></span>
          <span style="margin: 0 8px;">|</span>
          <span title="总积分">💎 <span id="pointsValue">0</span></span>
          <span style="margin: 0 8px;">|</span>
          <span title="连续记账">🔥 <span id="streakValue">0</span>天</span>
        </div>
        <button class="btn btn-success" onclick="window.location.href='import.html'" title="导入微信/支付宝账单">📥 账单导入</button>
        <button class="btn btn-primary" onclick="window.location.href='analysis.html'" title="智能财务分析">📊 智能分析</button>
        <button class="btn btn-primary" onclick="switchToSimple()" title="切换到简洁版">📱 简洁版</button>
        <div style="display: flex; gap: 5px;">
          <button class="btn btn-secondary" onclick="setTheme('light')" id="lightBtn" title="浅色模式">☀️</button>
          <button class="btn btn-secondary" onclick="setTheme('dark')" id="darkBtn" title="深色模式">🌙</button>
        </div>
        <button class="btn btn-secondary" onclick="showPINModal()">🔒 PIN设置</button>
        <button class="btn btn-danger" onclick="logout()">退出登录</button>
      </div>
    </div>

    <!-- 🎯 快捷操作栏 -->
    <div class="quick-actions-bar">
      <div class="quick-actions-header">
        <h3 class="quick-actions-title">
          <span>⚡</span>
          <span>快捷操作</span>
        </h3>
        <div class="quick-actions-subtitle">常用功能快速访问</div>
      </div>
      
      <div class="quick-actions-grid">
        
        <!-- 数据导出 -->
        <div class="quick-action-card export" onclick="exportData()" title="导出当前账本数据">
          <div class="quick-action-icon">📤</div>
          <div class="quick-action-content">
            <div class="quick-action-title">数据导出</div>
            <div class="quick-action-desc">导出 Excel</div>
          </div>
        </div>

        <!-- 财务目标 -->
        <div class="quick-action-card goal" onclick="showCreateGoalModal()" title="设置财务目标">
          <div class="quick-action-icon">🎯</div>
          <div class="quick-action-content">
            <div class="quick-action-title">财务目标</div>
            <div class="quick-action-desc">设置目标</div>
          </div>
        </div>

        <!-- 留言板 -->
        <div class="quick-action-card comment" onclick="showCommentsModal()" title="查看和添加账本留言">
          <div class="quick-action-icon">💬</div>
          <div class="quick-action-content">
            <div class="quick-action-title">留言板</div>
            <div class="quick-action-desc">查看留言</div>
          </div>
        </div>

        <!-- 消费分析 -->
        <div class="quick-action-card analysis" onclick="showAnalysisReportModal()" title="生成消费分析报告">
          <div class="quick-action-icon">📊</div>
          <div class="quick-action-content">
            <div class="quick-action-title">消费分析</div>
            <div class="quick-action-desc">生成月报</div>
          </div>
        </div>

        <!-- 数据备份 -->
        <div class="quick-action-card backup" onclick="backupData()" title="备份所有数据">
          <div class="quick-action-icon">💾</div>
          <div class="quick-action-content">
            <div class="quick-action-title">数据备份</div>
            <div class="quick-action-desc">立即备份</div>
          </div>
        </div>

      </div>
    </div>

    <!-- 账本列表 -->
    <div class="books-section">
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
        <h3 style="margin: 0;">我的账本</h3>
        <button class="btn btn-primary" onclick="showJoinModal()">➕ 加入账本</button>
      </div>
      <div class="books-grid" id="booksGrid">
        <div class="book-card add-book-card" onclick="showCreateBookModal()">
          <div>+</div>
          <div style="font-size: 14px;">创建账本</div>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 添加记录 -->
      <div class="section-card">
        <h3 class="section-title">📝 添加记录</h3>
        <form id="recordForm">
          <div class="form-group">
            <label>类型</label>
            <select id="recordType" required>
              <option value="">请选择</option>
              <option value="income">收入</option>
              <option value="expense">支出</option>
            </select>
          </div>
          <div class="form-group">
            <label>金额</label>
            <input type="number" id="recordAmount" step="0.01" min="0" required placeholder="0.00">
          </div>
          <div class="form-group">
            <label>分类</label>
            <select id="recordCategory" required>
              <option value="">请先选择类型</option>
            </select>
          </div>
          <div class="form-group">
            <label>日期</label>
            <input type="date" id="recordDate" required>
          </div>
          <div class="form-group">
            <label>备注</label>
            <input type="text" id="recordRemark" placeholder="可选">
          </div>
          <button type="submit" class="btn btn-primary" style="width: 100%;">添加记录</button>
        </form>
      </div>

      <!-- 统计数据 -->
      <div class="section-card">
        <h3 class="section-title">📊 收支统计</h3>
        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin-bottom: 20px;">
          <div style="text-align: center;">
            <div style="color: #666; font-size: 12px;">总收入</div>
            <div id="totalIncome" style="color: #34a853; font-size: 24px; font-weight: bold;">¥0</div>
          </div>
          <div style="text-align: center;">
            <div style="color: #666; font-size: 12px;">总支出</div>
            <div id="totalExpense" style="color: #ea4335; font-size: 24px; font-weight: bold;">¥0</div>
          </div>
          <div style="text-align: center;">
            <div style="color: #666; font-size: 12px;">余额</div>
            <div id="totalBalance" style="font-size: 24px; font-weight: bold;">¥0</div>
          </div>
        </div>
        <div id="categoryStats"></div>
      </div>
    </div>

    <!-- 📊 新增：收支图表 -->
    <div class="section-card" style="margin-top: 20px;">
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
        <h3 class="section-title" style="margin: 0; border: none; padding: 0;">📊 收支图表</h3>
        <div style="display: flex; gap: 10px;">
          <select id="chartMonths" onchange="loadChartData()" style="padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
            <option value="3">最近3个月</option>
            <option value="6" selected>最近6个月</option>
            <option value="12">最近12个月</option>
          </select>
          <button class="btn btn-primary chart-type-btn active" data-type="bar" onclick="switchChartType('bar')" title="柱形图">📊</button>
          <button class="btn btn-secondary chart-type-btn" data-type="pie" onclick="switchChartType('pie')" title="饼图">🥧</button>
          <button class="btn btn-secondary chart-type-btn" data-type="line" onclick="switchChartType('line')" title="折线图">📈</button>
        </div>
      </div>
      <div style="position: relative; height: 350px; padding: 10px;">
        <canvas id="mainChart"></canvas>
      </div>
      <div id="chartLegend" style="margin-top: 15px; text-align: center; font-size: 12px; color: #666;"></div>
    </div>

    <!-- 记录列表 -->
    <div class="section-card" style="margin-top: 20px;">
      <h3 class="section-title">📋 收支记录</h3>
      <div class="records-list" id="recordsList"></div>
    </div>

    <!-- 账本操作按钮 -->
    <div style="margin-top: 20px; display: flex; gap: 10px;" id="bookActions" style="display: none;">
      <button class="btn btn-success" onclick="showShareModal()">📤 分享账本</button>
      <button class="btn btn-primary" onclick="showJoinModal()">➕ 加入账本</button>
      <button class="btn btn-secondary" onclick="showMembersModal()">👥 查看成员</button>
    </div>

    <!-- 创新功能区域 -->
    <div style="margin-top: 30px;">
      <h3 style="margin-bottom: 15px;">🎨 创新功能</h3>
      <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;">
        
        <!-- 🎮 等级系统 -->
        <div class="section-card">
          <div class="section-title">⭐ 我的等级</div>
          <div id="levelInfo" style="text-align: center; padding: 20px 0;">
            <div style="font-size: 48px; margin-bottom: 10px;" id="levelDisplayIcon">🌱</div>
            <div style="font-size: 20px; font-weight: bold; margin-bottom: 5px;" id="levelDisplayName">新手</div>
            <div style="font-size: 14px; color: #666; margin-bottom: 15px;">等级 <span id="levelDisplay">1</span></div>
            
            <!-- 经验值进度条 -->
            <div style="background: #e0e0e0; height: 20px; border-radius: 10px; overflow: hidden; margin: 15px 0;">
              <div id="expProgress" style="height: 100%; background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); width: 0%; transition: width 0.5s;"></div>
            </div>
            <div style="font-size: 12px; color: #666;">
              <span id="currentExp">0</span> / <span id="nextLevelExp">100</span> EXP
            </div>
            
            <div style="margin-top: 15px; display: flex; justify-content: space-around; font-size: 12px;">
              <div>
                <div style="color: #666;">总记账</div>
                <div style="font-weight: bold; font-size: 16px; color: #4285f4;"><span id="totalRecordsDisplay">0</span>次</div>
              </div>
              <div>
                <div style="color: #666;">连续天数</div>
                <div style="font-weight: bold; font-size: 16px; color: #ff6b6b;"><span id="streakDisplay">0</span>天</div>
              </div>
              <div>
                <div style="color: #666;">总积分</div>
                <div style="font-weight: bold; font-size: 16px; color: #fbbc04;"><span id="totalPointsDisplay">0</span></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 🎮 成就系统 -->
        <div class="section-card">
          <div class="section-title">🏆 我的成就</div>
          <div id="achievementsDisplay" style="max-height: 300px; overflow-y: auto;">
            <div style="color: #999; text-align: center; padding: 40px;">加载中...</div>
          </div>
          <button class="btn btn-primary" onclick="showAllAchievements()" style="width: 100%; margin-top: 10px;">查看全部成就</button>
        </div>

        <!-- 🎮 等级排行榜（主页显示，保留用于未来功能）-->
        <div class="section-card" style="display: none;">
          <div class="section-title">🏅 等级排行榜</div>
          <div id="gameLeaderboardMain" style="max-height: 300px; overflow-y: auto;">
            <div style="color: #999; text-align: center; padding: 40px;">加载中...</div>
          </div>
          <button class="btn btn-secondary" onclick="loadGameLeaderboard()" style="width: 100%; margin-top: 10px;">刷新排行</button>
        </div>
        
        <!-- 快捷记账 -->
        <div class="section-card">
          <div class="section-title">⚡ 快捷记账</div>
          <div id="quickItemsList"></div>
          <button class="btn btn-primary" onclick="showCreateQuickItemModal()" style="width: 100%; margin-top: 10px;">+ 添加快捷项</button>
        </div>

        <!-- 预算预警 -->
        <div class="section-card">
          <div class="section-title">💰 预算预警</div>
          <div id="budgetsList"></div>
          <button class="btn btn-success" onclick="showCreateBudgetModal()" style="width: 100%; margin-top: 10px;">+ 设置预算</button>
        </div>

        <!-- 标签管理 -->
        <div class="section-card">
          <div class="section-title">🏷️ 标签管理</div>
          <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px;" id="tagsList"></div>
          <button class="btn btn-primary" onclick="showCreateTagModal()" style="width: 100%;">+ 创建标签</button>
        </div>

        <!-- 消费趋势 -->
        <div class="section-card">
          <div class="section-title">📈 消费趋势</div>
          <select id="trendPeriod" onchange="loadTrends()" style="width: 100%; padding: 8px; margin-bottom: 10px;">
            <option value="7days">最近7天</option>
            <option value="30days">最近30天</option>
            <option value="3months">最近3个月</option>
          </select>
          <div id="trendsChart" style="max-height: 200px; overflow-y: auto;"></div>
        </div>

        <!-- 本月vs上月 -->
        <div class="section-card">
          <div class="section-title">📊 本月vs上月</div>
          <div id="compareData"></div>
        </div>

        <!-- 账本对比 -->
        <div class="section-card">
          <div class="section-title">📚 账本对比</div>
          <div id="booksCompare" style="max-height: 200px; overflow-y: auto;"></div>
        </div>

        <!-- 预算预警通知 -->
        <div class="section-card">
          <div class="section-title">🔔 预算预警</div>
          <div id="budgetAlerts"></div>
        </div>

        <!-- 🆕 定期账单 -->
        <div class="section-card">
          <div class="section-title">📅 定期账单</div>
          <div id="recurringBillsList" style="max-height: 200px; overflow-y: auto;"></div>
          <button class="btn btn-success" onclick="showCreateBillModal()" style="width: 100%; margin-top: 10px;">+ 添加账单</button>
        </div>

        <!-- 🆕 成就系统 -->
        <div class="section-card">
          <div class="section-title">🏆 我的成就</div>
          <div id="achievementsList" style="max-height: 200px; overflow-y: auto;">
            <div style="color: #999; text-align: center; padding: 40px;">加载中...</div>
          </div>
          <button class="btn btn-primary" onclick="showAllAchievements()" style="width: 100%; margin-top: 10px;">🔍 查看全部成就</button>
        </div>

        <!-- 🆕 排行榜 -->
        <div class="section-card">
          <div class="section-title">🏅 等级排行榜</div>
          <div id="gameLeaderboard" style="max-height: 200px; overflow-y: auto;">
            <div style="color: #999; text-align: center; padding: 40px;">加载中...</div>
          </div>
          <button class="btn btn-secondary" onclick="loadGameLeaderboard()" style="width: 100%; margin-top: 10px;">刷新排行</button>
        </div>

      </div>
    </div>

  </div>

  <!-- 创建账本模态框 -->
  <div class="modal" id="createBookModal">
    <div class="modal-content">
      <h3 class="modal-title">创建新账本</h3>
      <form id="createBookForm">
        <div class="form-group">
          <label>账本名称</label>
          <input type="text" id="bookName" required placeholder="如：家庭账本">
        </div>
        <div class="form-group">
          <label>账本类型</label>
          <select id="bookType" required>
            <option value="personal">💰 个人账本</option>
            <option value="family">🏠 家庭账本</option>
            <option value="travel">✈️ 旅游账本</option>
            <option value="wedding">💍 婚礼账本</option>
            <option value="project">📊 项目账本</option>
          </select>
        </div>
        <div class="form-group">
          <label>选择图标</label>
          <div class="icon-picker" id="iconPicker"></div>
        </div>
        <div class="form-group">
          <label>选择颜色</label>
          <div class="color-picker" id="colorPicker"></div>
        </div>
        <div class="modal-actions">
          <button type="button" class="btn btn-secondary" onclick="closeModal('createBookModal')">取消</button>
          <button type="submit" class="btn btn-primary">创建</button>
        </div>
      </form>
    </div>
  </div>

  <!-- PIN码设置模态框 -->
  <div class="modal" id="pinModal">
    <div class="modal-content">
      <h3 class="modal-title">🔒 PIN码管理</h3>
      <div class="form-group">
        <label>设置PIN码（4-6位数字）</label>
        <input type="password" id="pinInput" maxlength="6" placeholder="输入PIN码">
      </div>
      <button class="btn btn-primary" onclick="setPIN()" style="width: 100%; margin-bottom: 10px;">设置PIN</button>
      <button class="btn btn-success" onclick="verifyPIN()" style="width: 100%; margin-bottom: 10px;">验证PIN</button>
      <div id="pinStatus" style="margin-top: 15px; padding: 10px; background: #f5f5f5; border-radius: 4px;"></div>
      <div class="modal-actions">
        <button class="btn btn-secondary" onclick="closeModal('pinModal')">关闭</button>
      </div>
    </div>
  </div>

  <!-- 分享账本模态框 -->
  <div class="modal" id="shareModal">
    <div class="modal-content">
      <h3 class="modal-title">📤 分享账本</h3>
      <div id="shareCodeContainer"></div>
      <div class="modal-actions">
        <button class="btn btn-secondary" onclick="closeModal('shareModal')">关闭</button>
      </div>
    </div>
  </div>

  <!-- 加入账本模态框 -->
  <div class="modal" id="joinModal">
    <div class="modal-content">
      <h3 class="modal-title">➕ 加入账本</h3>
      <div class="form-group">
        <label>输入分享码</label>
        <input type="text" id="joinCode" placeholder="6位分享码" maxlength="6" style="text-transform: uppercase;">
      </div>
      <div class="modal-actions">
        <button class="btn btn-secondary" onclick="closeModal('joinModal')">取消</button>
        <button class="btn btn-primary" onclick="joinBook()">加入</button>
      </div>
    </div>
  </div>

  <!-- 成员列表模态框 -->
  <div class="modal" id="membersModal">
    <div class="modal-content">
      <h3 class="modal-title">👥 账本成员</h3>
      <div id="membersList"></div>
      <div class="modal-actions">
        <button class="btn btn-secondary" onclick="closeModal('membersModal')">关闭</button>
      </div>
    </div>
  </div>

  <!-- 创建快捷项模态框 -->
  <div class="modal" id="createQuickItemModal">
    <div class="modal-content">
      <h3 class="modal-title">创建快捷记账项</h3>
      <form id="createQuickItemForm">
        <div class="form-group">
          <label>项目名称</label>
          <input type="text" id="quickItemName" required placeholder="如：早餐">
        </div>
        <div class="form-group">
          <label>类型</label>
          <select id="quickItemType" required>
            <option value="expense">支出</option>
            <option value="income">收入</option>
          </select>
        </div>
        <div class="form-group">
          <label>默认金额</label>
          <input type="number" id="quickItemAmount" step="0.01" required placeholder="15.00">
        </div>
        <div class="form-group">
          <label>分类</label>
          <select id="quickItemCategory" required>
            <option value="food">餐饮</option>
            <option value="transport">交通</option>
            <option value="shopping">购物</option>
            <option value="entertainment">娱乐</option>
            <option value="other">其他</option>
          </select>
        </div>
        <div class="form-group">
          <label>图标</label>
          <input type="text" id="quickItemIcon" placeholder="🍜" maxlength="2">
        </div>
        <div class="modal-actions">
          <button type="button" class="btn btn-secondary" onclick="closeModal('createQuickItemModal')">取消</button>
          <button type="submit" class="btn btn-primary">创建</button>
        </div>
      </form>
    </div>
  </div>

  <!-- 创建预算模态框 -->
  <div class="modal" id="createBudgetModal">
    <div class="modal-content">
      <h3 class="modal-title">设置预算</h3>
      <form id="createBudgetForm">
        <div class="form-group">
          <label>预算名称</label>
          <input type="text" id="budgetName" required placeholder="如：本月餐饮预算">
        </div>
        <div class="form-group">
          <label>预算周期</label>
          <select id="budgetType" required>
            <option value="monthly">月度预算</option>
            <option value="weekly">周预算</option>
            <option value="daily">每日预算</option>
          </select>
        </div>
        <div class="form-group">
          <label>预算金额</label>
          <input type="number" id="budgetAmount" step="0.01" required placeholder="1000.00">
        </div>
        <div class="form-group">
          <label>限定分类（可选）</label>
          <select id="budgetCategory">
            <option value="">全部</option>
            <option value="food">餐饮</option>
            <option value="transport">交通</option>
            <option value="shopping">购物</option>
            <option value="entertainment">娱乐</option>
          </select>
        </div>
        <div class="form-group">
          <label>预警阈值（%）</label>
          <input type="number" id="budgetThreshold" value="80" min="1" max="100">
        </div>
        <div class="modal-actions">
          <button type="button" class="btn btn-secondary" onclick="closeModal('createBudgetModal')">取消</button>
          <button type="submit" class="btn btn-success">创建</button>
        </div>
      </form>
    </div>
  </div>

  <!-- 创建标签模态框 -->
  <div class="modal" id="createTagModal">
    <div class="modal-content">
      <h3 class="modal-title">创建标签</h3>
      <form id="createTagForm">
        <div class="form-group">
          <label>标签名称</label>
          <input type="text" id="tagName" required placeholder="如：必需品">
        </div>
        <div class="form-group">
          <label>标签颜色</label>
          <input type="color" id="tagColor" value="#4285f4">
        </div>
        <div class="modal-actions">
          <button type="button" class="btn btn-secondary" onclick="closeModal('createTagModal')">取消</button>
          <button type="submit" class="btn btn-primary">创建</button>
        </div>
      </form>
    </div>
  </div>

  <!-- 消费分析报告模态框 -->
  <div class="modal" id="analysisReportModal">
    <div class="modal-content" style="max-width: 600px;">
      <h3 class="modal-title">📊 消费分析报告</h3>
      <div id="analysisReport" style="min-height: 200px;">
        <div style="text-align: center; padding: 40px; color: #999;">
          点击下方按钮生成报告...
        </div>
      </div>
      <div class="modal-actions">
        <button class="btn btn-primary" onclick="generateAnalysisReportContent()">重新生成</button>
        <button class="btn btn-secondary" onclick="closeModal('analysisReportModal')">关闭</button>
      </div>
    </div>
  </div>

  <!-- 留言板模态框 -->
  <div class="modal" id="commentsModal">
    <div class="modal-content" style="max-width: 600px;">
      <h3 class="modal-title">💬 账本留言板</h3>
      <div style="margin-bottom: 15px;">
        <button class="btn btn-primary" onclick="showAddCommentDialog()" style="width: 100%;">
          ✍️ 添加新留言
        </button>
      </div>
      <div id="commentsList" style="max-height: 400px; overflow-y: auto;">
        <div style="text-align: center; padding: 40px; color: #999;">
          加载中...
        </div>
      </div>
      <div class="modal-actions">
        <button class="btn btn-success" onclick="loadCommentsContent()">🔄 刷新</button>
        <button class="btn btn-secondary" onclick="closeModal('commentsModal')">关闭</button>
      </div>
    </div>
  </div>

  <!-- Chart.js 图表库 - 本地文件（离线可用） -->
  <script src="./lib/chart.umd.min.js" 
          onerror="console.error('Chart.js未找到，请运行【下载图表库.bat】或查看 src/lib/下载说明.txt')"></script>

  <script src="./js/notification.js?v=2"></script>
  <script src="./js/alert-helper.js?v=3"></script>
  <script src="./js/api.js?v=17"></script>
  <script src="./js/main.js?v=21"></script>
  <script src="./js/charts.js?v=1"></script>
  <script src="./js/gamification-ui.js?v=5"></script>
  <script>
    // 版本切换函数
    function switchToSimple() {
      if (confirm('切换到简洁版将隐藏创新功能，只保留核心功能。是否继续？')) {
        localStorage.setItem('preferredVersion', 'simple');
        // 添加时间戳强制刷新，避免缓存
        window.location.href = './index-simple.html?t=' + Date.now();
      }
    }
    
    window.addEventListener('load', () => {
      console.log('=== 创新版功能已加载 ===');
      console.log('loadGoals:', typeof loadGoals);
      console.log('loadAchievements:', typeof loadAchievements);
      console.log('backupData:', typeof backupData);
      console.log('generateAnalysisReport:', typeof generateAnalysisReport);
      console.log('=================');
      
      // 检查版本偏好
      const preferred = localStorage.getItem('preferredVersion');
      if (preferred === 'simple') {
        console.log('检测到用户偏好简洁版');
      }
    });
  </script>
</body>
</html>